<!--
 * @title: 会议室电子屏页面
 * @description: 这是一个单独的页面
 * @fileName: elecCard.vue
 * @author: zhanglongfei
 * @date: 2019-10-30 10:15:40
!-->
<template>
  <div class="body">
    <div class="header">
      <img src="/static/images/boardroom/logo.png" class="logo" />
      <div class="time">
        <svg-icon icon-class="time" /> {{ dateNow.time }}
        <p>
          {{ dateNow.date }} <span>{{ dateNow.week }}</span>
        </p>
      </div>
    </div>
    <h1 class="title">{{ model.name }}</h1>
    <div class="boardroom">
      <div class="current">
        <h2>当前会议</h2>
        <div class="info">
          <template v-if="current && current.id">
            <p><span>会议主题：</span>{{ current.name }}</p>
            <p><span>会议时间：</span>{{ current.begintime | toDateTime("HH:mm") }}-{{ current.endtime | toDateTime("HH:mm") }}</p>
            <p><span>部门：</span>{{ getDept(current.dispdeptcode) }}</p>
            <p>
              <span>{{ current.hostusername ? "主持人" : "申请人" }}：</span>{{ current.hostusername ? current.hostusername : current.username }}
            </p>
          </template>
          <p style="text-align:center;padding-top:90px;" v-else>暂无会议</p>
        </div>
      </div>
      <div class="wait">
        <h2>待开会议</h2>
        <div class="list">
          <template v-if="wait && wait.length > 0">
            <div class="item" v-for="item in wait" :key="item.id">
              <div class="left">
                <p>{{ item.begintime | toDateTime("yyyy/MM") }}</p>
                <p class="bold">{{ item.begintime | toDateTime("dd") }}</p>
                <p>{{ getWeek(new Date(item.begintime)) }}</p>
              </div>
              <div class="right">
                <p>{{ item.name }}</p>
                <p class="info">
                  <svg-icon icon-class="time" /> {{ item.begintime | toDateTime("HH:mm") }}~{{ item.endtime | toDateTime("HH:mm") }} <span class="dept"><svg-icon icon-class="dept" /> {{ getDept(item.dispdeptcode) }}</span>
                </p>
              </div>
            </div>
          </template>
          <p v-else style="text-align:center;padding-top:97px;font-size:30px;color: rgba(255, 255, 255, 0.74);">暂无预约信息</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAction, postAction } from "@tapui/utils/http"
import { formatDate } from "@tapui/utils/date"
export default {
  data() {
    return {
      current: {},
      wait: [],
      model: {
        name: "会议室名称"
      },
      id: this.$route.query.id,
      version: "V1.1",
      timer: null,
      refreshTimer: null,
      dateNow: {
        time: "00:00",
        date: "2019/01/01",
        week: "星期一"
      }
    }
  },
  methods: {
    loadData() {
      this.version = localStorage.getItem("version")
      getAction("/toa/boardroomItem/elecCard", { id: this.id, version: this.version }).then(res => {
        this.current = res.result.current
        this.wait = res.result.waitList
        this.model = res.result.model
        this.version = res.result.version
        localStorage.setItem("version", this.version)
        this.serverTime(res.timestamp)
        if (res.result.command) {
          if (res.result.command === "refresh") {
            document.location.reload()
          }
        }
      })
    },
    timeBegin() {
      // this.timer = setInterval(this.time, 1000)
      this.refreshTimer = setInterval(this.loadData, 30000)
    },
    serverTime(timestamp) {
      let date = new Date(timestamp)
      this.dateNow.time = formatDate(date, "HH:mm")
      this.dateNow.date = formatDate(date, "yyyy/MM/dd")
      this.dateNow.week = this.getWeek(date)
    },
    time() {
      let date = new Date()
      this.dateNow.time = formatDate(date, "HH:mm")
      this.dateNow.date = formatDate(date, "yyyy/MM/dd")
      this.dateNow.week = this.getWeek(date)
    },
    getWeek(date) {
      return "星期" + "日一二三四五六".charAt(date.getDay())
    },
    getDept(fullname) {
      let array = fullname.split("\\")
      if (array.length < 2) return fullname
      return array[1]
    }
  },
  beforeDestroy() {
    // clearInterval(this.timer)
    clearInterval(this.refreshTimer)
  },
  created() {
    this.loadData()
    this.timeBegin()
  }
}
</script>
<style lang="scss" scoped>
.body {
  background: url("/static/images/boardroom/bg1.png") no-repeat top center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  color: white;
  font-weight: bold;
  p,
  h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header {
    margin-top: 65px;
    overflow: hidden;
    .logo {
      float: left;
      margin-left: 190px;
      display: block;
    }
    .time {
      float: right;
      margin-right: 305px;
      font-size: 69px;
      text-align: right;
      p {
        font-size: 35px;
        span {
          display: inline-block;
          margin-left: 40px;
        }
      }
    }
  }
  h1.title {
    font-size: 200px;
    text-align: center;
    margin: 90px 0 100px 0;
  }
  .boardroom {
    overflow: hidden;
    h2 {
      font-size: 50px;
      text-align: center;
      margin: 0;
      margin-bottom: 25px;
    }
    .current {
      width: 485px;
      float: left;
      margin-left: 270px;
      .info {
        border-top: 4px #696888 solid;
        border-bottom: 4px #696888 solid;
        color: rgba(255, 255, 255, 0.74);
        padding: 20px 0;
        font-size: 32px;
        height: 275px;
        p {
          margin-bottom: 30px;
          span {
            display: inline-block;
            width: 165px;
            text-align: right;
            margin-right: 10px;
          }
        }
      }
    }
    .wait {
      float: left;
      margin-left: 240px;
      width: 598px;
      overflow: hidden;
      .list {
        margin-top: 45px;
        background: #4e33a8 url("/static/images/boardroom/line.png") no-repeat;
        background-position: 20px 126px;
        height: 254px;
        border-radius: 10px;
        .item {
          padding: 16px;
          overflow: hidden;
          .left {
            float: left;
            background-image: url('/static/images/boardroom/rili.png');
            background-size: 95px;
            width: 95px;
            height: 96px;
            text-align: center;
            border-radius: 10px;
            color: #fcd436;
            p {
              font-size: 16px;
              font-weight: normal;
              line-height: 23px;
            }
            p.bold {
              font-size: 48px;
              font-weight: bold;
              line-height: 45px;
            }
          }
          .right {
            width: 425px;
            float: right;
            padding: 10px 0;
            color: rgba(255, 255, 255, 0.74);
            p {
              font-size: 27px;
              line-height: 27px;
              font-weight: normal;
            }
            p.info {
              font-size: 24px;
              font-weight: normal;
              margin-top: 22px;
            }
            .dept {
              display: inline-block;
              margin-left: 35px;
            }
          }
        }
      }
    }
  }
}
</style>
